import { createApp } from 'vue'
import pinia from './stores'
import App from './App.vue'
import router from './router'
// 引入初始化样式文件
import '@/styles/common.scss'
import { imgLazyPlugin } from './directives'
import 'element-plus/theme-chalk/index.css' //element-plus的样式文件

const app = createApp(App)

app.use(router)
app.use(pinia)
app.use(imgLazyPlugin)

app.mount('#app')

// 问:懒加载指令的逻辑直接写到入口文件中，合理吗?
// 答:不合理，入口文件通常只做一些初始化的事情，不应该包含太多的逻辑代码，可以通过插件的方法把懒加载指令封装为插件，main.is入口文件只需要负责注册插件即可

// 定义全局指令
// app.directive('img-lazy', {
//   mounted(el, binding) {
//     // el: 指令绑定的那个元素
//     // binding: binding.value 指令等于号后面绑定的表达式的值 图片url
//     console.log(el, binding.value)
//     useIntersectionObserver(el, ([{ isIntersecting }]) => {
//       if (isIntersecting) {
//         // 图片进入视口区域
//         el.src = binding.value
//       }
//       // console.log(isIntersecting)
//     })
//   },
// })
